<template>
  <div class="itemPanel">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="绘制面板" name="1">

        <div class="sub-item" draggable="true" v-for="item, index in list" :key="index" :data-item="JSON.stringify(item)" @dragstart="dragstart">
          <i :class="['iconfont', 'icon-'+item.className]" />
          <p>{{ item.label }}</p>
        </div>

      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { icons } from "@/utils";

export default {
  name: "ItemPanel",
  data() {
    return {
      activeNames: ['1'],
      list: Array.from({ length: icons.length }, (_, index) => ({
        label: icons[index].name,
        icon: icons[index].unicode,
        className: icons[index].iconClass,
        size: [60, 60],
      }))
    };
  },
  methods: {
    dragstart(e) {
      const { item } = e.target.dataset;
      const ghost = document.createElement('img');
      ghost.src = "";
      e.dataTransfer.setDragImage(ghost, 0, 0);
      e.dataTransfer.setData('dragComponent', item);
    }
  },
}
</script>

<style lang="scss" scoped>
.itemPanel {
  height: 100%;
  padding: 0 5px;
  .sub-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #ebeef5;
    &:last-child {
      border: none;
    }
    i {
      width: 50px;
      height: 50px;
      position: relative;
      background-color: #60a5fa;
      border-radius: 50%;

      &::before {
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 30px;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        text-align: center;
      }
    }
    p {
      margin: 0;
      font-size: 12px;
      color: #606266;
      user-select: none;
    }
  }
}
</style>
